<template>
  <div>

    <template v-for="(item,index) in datas">
      <span :key="index" class="mr10" @click="onCompanyClick(item)">
        <el-tag closable @close="close(item,index)">
          {{ item.name }}
        </el-tag>
      </span>
    </template>
    <el-input
      v-if="inputVisible"
      ref="saveTagInput"
      v-model="inputValue"
      class="input-new-tag"
      size="mini"
      @keyup.enter.native="handleInputConfirm"
      @blur="handleInputConfirm"
    />
    <el-button v-else type="primary" icon="el-icon-plus" circle size="mini" @click="showInput"/>

  </div>
</template>

<script>
export default {
  name: 'Tags',
  props: {
    datas: {
      type: Array
    }
  },
  data() {
    return {
      inputVisible: false,
      inputValue: ''
    }
  },
  methods: {
    close(item, index) {
      this.$confirm('确认删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$emit('del', item, index)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    onCompanyClick(item, index) {
      this.$emit('onCompanyClick', item, index)
    },
    showInput() {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },

    handleInputConfirm() {
      const inputValue = this.inputValue
      if (inputValue) {
        this.datas.push({ name: inputValue })
      }
      this.inputVisible = false
      this.inputValue = ''
    }
  }
}
</script>

<style scoped>
    .input-new-tag {
        width: 90px;
        margin-left: 10px;
        vertical-align: middle;
    }
</style>
